<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>列表页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/list-pc.css">
</head>
<body>
<header>
    <div class="header-top">
        <div class="container">
            <div class="top-left">
                <a href=""><img src="images/index/icon1.png"/></a>
                <a href=""><img src="images/index/icon2.png"/></a>
                <a href=""><img src="images/index/icon3.png"/></a>
            </div>
            <div class="top-right">
                伊森官方旗舰网站欢迎您的光临
            </div>
        </div>
    </div>
    <div class="header-bottom">
        <div class="container">
            <div class="logo">
                <a href="index.html"><img src="images/index/logo.png"/></a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="">关于伊森</a></li>
                    <li><a href="">产品系列</a>
                        <ul class="none">
                            <li><a href="">男士腕表系列</a><i></i></li>
                            <li><a href="">女士腕表系列</a><i></i></li>
                        </ul>

                    </li>
                    <li><a href="">售后服务</a></li>
                    <li><a href="">联系伊森</a></li>
                </ul>
            </div>
        </div>
    </div>

</header>
<section class="content">
    <div class="banner">
        <ul>
            <li><a href=""><img src="images/list/list-banner2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/list/list-banner2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/list/list-banner2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/list/list-banner2.jpg" alt=""></a></li>
            <li><a href=""><img src="images/list/list-banner2.jpg" alt=""></a></li>

        </ul>
        <div class="item">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </div>
    </div>
    <div class="product">
        <div class="container">
            <div class="container-top">
                <div class="container-top-left">
                    您的位置
                </div>
                <div class="container-top-right">
                    <a href="">首页</a> ><a href="">产品系列</a>><a href="">男士腕表系列</a>
                </div>
            </div>
            <div class="container-center">
                <div class="container-center-left">
                    <p class="all">所有伊森腕表</p>
                    <div class="hide">
                        <p class="hide1">隐藏筛选条件 <span></span></p>
                        <ul>
                            <li><a href="">尺寸 <span></span></a></li>
                            <li><a href="">功能 <span></span></a></li>
                            <li><a href="">材质 <span></span></a></li>
                            <li><a href="">价格 <span></span></a></li>
                        </ul>
                    </div>
                    <p class="examine">查看所有</p>
                    <div class="male">
                        <p class="man">男士腕表系列 <span></span></p>
                        <ul class="zebra">
                            <li><a href="">男士腕表1 </a></li>
                            <li><a href="">男士腕表2 </a></li>
                            <li><a href="">男士腕表3 </a></li>
                            <li><a href="">男士腕表4 </a></li>
                            <li><a href="">男士腕表5 </a></li>
                        </ul>
                    </div>
                    <div class="female">
                        <p class="woman">女士腕表系列 <span></span></p>
                        <ul>
                            <li><a href="">女士腕表1 <span></span></a></li>
                            <li><a href="">女士腕表2 <span></span></a></li>
                            <li><a href="">女士腕表3 <span></span></a></li>
                            <li><a href="">女士腕表4 <span></span></a></li>
                            <li><a href="">女士腕表5 <span></span></a></li>
                        </ul>
                    </div>

                </div>
                <div class="container-center-right">
                    <p class="zy">卓越性能与显赫象征</p>
                    <h2 class="yswb">伊森腕表</h2>
                    <p class="jjjj">伊森腕表蕴含最优质的原材料与一丝不苟的工艺。每件组件均由伊森自行以严格的标准设计及研制。</p>
                    <ul>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                        <li><a href="">
                            <img src="images/list/1.png" alt="">
                            <p class="fashion">伊森男士腕表时尚</p>
                            <p class="zs">ZS-W001枫木</p>
                        </a></li>
                    </ul>
                </div>
            </div>
            <div class="container-bottom">
                <a href="">上一页</a>
                <a href="">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="">5</a>
                <a href="">...</a>
                <a href="">下一页</a>
                <input type="text">
                <a href="">确认</a>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="footer">
        <div class="footer-top">
            <ul>
                <li><a href="">伊森腕表品牌</a></li>
                <li><a href="">品牌简介</a></li>
                <li><a href="">总裁致辞</a></li>
                <li><a href="">员工关怀</a></li>
                <li><a href="">招商加盟</a></li>
                <li><a href="">人才招聘</a></li>
            </ul>
            <ul>
                <li><a href="">伊森腕表品牌</a></li>
                <li><a href="">品牌简介</a></li>
                <li><a href="">总裁致辞</a></li>
                <li><a href="">员工关怀</a></li>
                <li><a href="">招商加盟</a></li>
                <li><a href="">人才招聘</a></li>
            </ul>
            <ul>
                <li><a href="">伊森腕表品牌</a></li>
                <li><a href="">品牌简介</a></li>
                <li><a href="">总裁致辞</a></li>
                <li><a href="">员工关怀</a></li>
                <li><a href="">招商加盟</a></li>
                <li><a href="">人才招聘</a></li>
            </ul>
        </div>

        <div class="footer-bottom">
            <span>Copyright2016伊森腕表版权所有</span>
            <span class="hao">粤ICP备1234567号</span>
            <span>贵宾专线：400-200-9999</span>
            <span class="dz">地址：广州市海珠区XX大厦1808室</span>
        </div>
    </div>
</footer>
<script type="text/javascript">
    var lis=document.querySelectorAll('.zebra li');
    console.log(lis);
    for (var i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            this.style.backgroundColor = 'red';
        };
        lis[i].index = i;
        lis[i].onmouseout = function () {
            if (this.index % 2 == 0) {
                this.style.backgroundColor = 'black';
            } else {
                this.style.backgroundColor = '';
            }
        };
        //设置静态斑马线
        if (i % 2 == 0) {
            lis[i].style.backgroundColor = 'black';
        }
    }


</script>
</body>
</html>